<!-- latitude:37.09024
    longitude
:
-95.71289100000001
scale
:
0.5
svgPath
:
"M10 16A6 6 0 1 1 10.001 16M10 14A4 4 0 1 0 9.999 14"
title
:
"United States"
zoomLevel
:
5 -->
<div class="card shadow mb-4" id="accordion">
    <div class="card-body row d-flex align-items-center" [ngClass]="{'collapsed pointer': !noExpand}" id="headingOne" (click)="collapseToggle()" [attr.data-toggle]="!noExpand ? 'collapse' : null"
        [attr.data-target]="'#'+indicator.id" aria-expanded="false" [attr.aria-controls]="indicator.id">
        <div class="col-5">
            <i class="ti- mr-2"></i>
            {{ indicator.name }}
        </div>
        <div class="col-4">
            <img [attr.src]="'/assets/icons-svg/icon-cat'+indicator.answerCategory+'.svg'" class="controversy-icon" /> Category {{ indicator.answerCategory }} - {{ incidentCategory[indicator.answerCategory] }}
        </div>
        <div class="col-3">
            <span *ngIf="indicatorDetails && indicatorDetails.outlookAssessment">
                {{ indicatorDetails.outlookAssessment }}
                <img [attr.src]="'/assets/icons-svg/icon-outlook-'+(indicatorDetails.outlookAssessment).toLowerCase()+'.svg'" class="outlook-icon ml-2" />
            </span>
        </div>
    </div>

    <div *ngIf="!noExpand" [attr.id]="indicator.id" class="collapse mt-4" aria-labelledby="headingOne" data-parent="#accordion">
        <div *ngIf="indicatorDetails">
            <div class="card-body row indicator-details">
                <div class="col-md-6">
                    <div *ngIf="indicatorDetails.outlookText">
                        <h6>Outlook {{ indicatorDetails.outlookAssessment }}</h6>
                        <p>{{ indicatorDetails.outlookText }}</p>

                        <p *ngFor="let comment of indicatorDetails.outlookComments">{{ comment }}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div *ngIf="indicatorDetails.controversySummary">
                        <h6>Assessment</h6>
                        <p>{{ indicatorDetails.controversySummary }}</p>
                        <p>{{ indicatorDetails.answerCategoryJustification }}</p>
                        <span *ngIf="indicatorDetails.answerCategory > 3">
                            {{indicatorDetails.impactText}}
                            <ul>
                                <li *ngFor="let comment of indicatorDetails.impactComments">{{comment}}</li>
                            </ul>  
                            
                            {{indicatorDetails.riskText}}
                            <ul>
                                <li *ngFor="let comment of indicatorDetails.riskComments">{{comment}}</li>
                            </ul> 

                            {{indicatorDetails.preparednessText}}
                            <ul>
                                <li *ngFor="let comment of indicatorDetails.preparednessComments">{{comment}}</li>
                            </ul>
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-body bg-primary-light">
                <div class="row indicator-details">
                    <div class="col-6">
                        <!-- Map -->
                        <div *ngIf="incidentLocations" mapChart [chartID]="'map_' + indicatorIndex" [currentCompany]="companyId" [currenEvent]="'123'"
                            [chartData]="incidentLocations" class="row">
                            <div id="{{'map_' + indicatorIndex}}" style="height:300px;width:100%;"></div>
                        </div>

                        <p><span class="bold">Locations:</span> {{ eventLocation }}</p>
                        <p><span class="bold">Tags:</span> {{ eventTags }}</p>

                        <!-- Impact -->
                        <div incident-scatterChart *ngIf="impactData && indicatorDetails.answerCategory >= 3 && oldestIncidentDate" [chartID]="'impact'"
                            [chartData]="impactData" [dateAxis]=true [startDate]="oldestIncidentDate" class="indicator-scatter">
                            <div id="impact" style="height:200px;width:100%"></div>
                        </div>
                        <!-- Chart Legend -->
                        <div *ngIf="impactData && indicatorDetails.answerCategory >= 3 && oldestIncidentDate" class="mt-3 secondary-text">
                            <div class="chart-legend-circle small mr-2 bg-orange"></div> Main Incident
                            <div class="chart-legend-circle small mr-2 ml-4 bg-dark-grey"></div> Highest of Impact or Risk
                        </div>

                    </div>

                    <div class="col-6">
                        <div *ngFor="let incident of incidents">
                            <div *ngIf="incident.main">
                                <div class="bold text-link" (click)="showDetails(indicator.id, incident.main)" style="cursor:pointer">{{ incident.main.name }}</div>
                                <p>
                                    <a *ngIf="incident.main.externalUrl" href="{{ incident.main.externalUrl }}" target="_blank">{{ incident.main.source }} - {{ incident.main.incidentDate | date:'d MMM y' }}</a>
                                    <span *ngIf="!incident.main.externalUrl">{{ incident.main.source }} - {{ incident.main.incidentDate | date:'d MMM y' }}</span>
                                </p>
                            </div>
                                <div style="padding:0 0 0 15px;margin:0 0 4px 0" *ngFor="let update of incident.updates">
                                    <!-- Incident updates -->
                                    <div class="bold text-link" (click)="showDetails(indicator.id, update)" style="cursor:pointer">{{ update.name }}</div>
                                    <p>
                                        <a *ngIf="update.externalUrl" href="{{ update.externalUrl }}" target="_blank">{{ update.source }} - {{ update.incidentDate | date:'d MMM y' }}</a>
                                        <span *ngIf="!update.externalUrl">{{ update.source }} - {{ update.incidentDate | date:'d MMM y' }}</span>
                                    </p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <app-modal [id]="indicator.id + '_incident'" [size]="'modal-lg'">
        <div class="app-modal-header">Incident Details</div>
        <div *ngIf="selectedIncident" class="app-modal-body">
            <h3>
                <span *ngIf="selectedIncident.type != 0">Update: </span>{{selectedIncident.name}}
            </h3>
            <a *ngIf="selectedIncident.externalUrl" href="{{ selectedIncident.externalUrl }}" target="_blank" class="text-link">{{ selectedIncident.source }} - {{ selectedIncident.incidentDate | date:'d MMM y' }}</a>
            <div class="indicator-details px-0 py-2">
                <p [innerHtml]="selectedIncident.summary" class="mt-3"></p>
                <div class="row">
                    <h6 class="col-md-1">Impact</h6>
                    <bullet-score class="col-md-5" [score]="selectedIncident.impactScore" [trend]="selectedIncident.impactTrend"></bullet-score>
                    <h6 class="col-md-1">Risk</h6>
                    <bullet-score class="col-md-5" [score]="selectedIncident.riskScore" [trend]="selectedIncident.riskTrend"></bullet-score>
                </div>
                <span *ngIf="selectedIncident.type != 0 && selectedMainIncident">
                    <hr/>
                    <h3>Main Incident: {{selectedMainIncident.name}}</h3>
                    <a *ngIf="selectedMainIncident.externalUrl" href="{{ selectedMainIncident.externalUrl }}" target="_blank" class="text-link">{{ selectedMainIncident.source }} - {{ selectedMainIncident.incidentDate | date:'d MMM y' }}</a>
                </span>
            </div>
        </div>
    </app-modal>
</div>

